<style scoped>
	.box{
		background: #F9B569;
    color: #fff;
    padding-top: 1.2em;
    padding-left: 1em;
    padding-bottom: 1em;
    padding-right: 1em;
    font-size: 2em;
	}
	.number {
    position: relative;
    height:1.5em;
	}
	.container{
		width: 96%;
		margin-left: 2%;
	}
	.nickname{
		width:100%;
		font-size: 2em;
		margin-top:1em;
		border:0;
	}
	.nickname::-webkit-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.nickname::-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.nickname:-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.nickname::-ms-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}

	.tel{
		width:100%;
		font-size: 2em;
		border:0;
	}
	.tel::-webkit-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.tel::-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.tel:-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.tel::-ms-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}

	.message{
		width:100%;
		font-size: 2em;
		margin-top: 1em;
		border:0;
	}
	.message::-webkit-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.message::-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.message:-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.message::-ms-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.summary{
		font-size: 1.5em;
		position: relative;
	}
	.summary .title{
		display: inline-block;
	}
	.summary .value{
		display: inline-block;
		position: absolute;
		right:0;
	}
	.checkbox{
		display:inline-block;
		vertical-align: middle;
		margin:0;
		padding:0;
	}
	.checkbox>#shengming{
		display:none;
	}
	.checkbox>label{
		background:#fff;
		border:1px solid darkgrey;
		width:2em;
		height:2em;
		display:inline-block;
		vertical-align: middle;
	}
	.checkbox>#shengming:checked+label{
		background-image:url(../resource/images/activities/selected.png);
		background-repeat: no-repeat;
		background-size:80% 80%;
		background-position: center;
		border:1px solid darkgrey;
	}
	.shengming .text1{
		font-size:1.8em;
		vertical-align:middle;
		display:inline-block;
		margin-left: .5em;
		color:#DADADA;
	}
	.shengming .text2{
		font-size:1.8em;
		display:inline-block;
		vertical-align:middle;
    margin-left: .5em;
		color:#2DA1FC;
		text-decoration: underline;
	}
	.enrollbtn {
    background: #FC8D27;
    padding: 1em;
    text-align: center;
    font-size: 24px;
    color: #fff;
    margin-top: 2em;
    width: 100%;
    border:0;
	}
	input.count {
		text-align: right;
		padding-right: 10px;
    width: 60%;
    display: inline-block;
    position: relative;
    color: white;
    background: transparent;
    border: 0;
    vertical-align: top;
    border: 0;
    font-size: 1em;
    margin-top: -5px;
}
</style>
<template>
<div class="container">
	<input v-model="member.name" type="text" class="nickname" placeholder="昵称...">
	<hr>
	<input v-model="member.tel" type="tel" class="tel" placeholder="手机号码...">
	<hr>
	<div class="box">
		<div class="number">
			<div style="display:inline-block;vertical-align:top;font-size:1em">报名人数</div><div style="height:1.5em;width:50%;position:absolute;right:0;text-align:right;display:inline-block;vertical-align:top;font-size:1em"><input @change="chargeupdate" v-model="member.count" type="text" name="" class="count"><div style="display:inline-block;vertical-align:top;font-size:1em;">位</div></div>
		</div>
		<hr style="margin:.5em auto">
		<div class="charge">
			<div class="title"><span>报名费</span><span style="margin-left:.3em;">{{activity.charge.enrollFee}}元/位</span></div>
			<div class="summary">
				<div class="title">合计</div>
				<div class="value"><span>{{summary}}元</span></div>
			</div>
		</div>
	</div>
	<input v-model="member.message" type="text" class="message" placeholder="活动留言...">
	<hr style="margin:1em auto">
	<div class="shengming">
		<div class="checkbox">
			<input type="checkbox" id="shengming" v-model="statusSend"><label for="shengming"></label>
			<i style="display:inline-block;width:0;height:100%;vertical-align:middle"></i>
		</div>
		<span class="text1">我已阅读</span><a v-link="11" class="text2">活动声明</a>
		<i style="display:inline-block;width:0;height:100%;vertical-align:middle"></i>
	</div>
	
</div>
<button @click="sendEnroll" class="enrollbtn">确认报名</button>
</template>
<script>
	
	module.exports = {
		ready:function(){
			this.activity = JSON.parse(window.localStorage.getItem("activity"));
			this.summary = this.activity.charge.enrollFee;
		},
		data:function(){
			return {
				url:"/camp/activity/signup",
				member:{
					name:"",
					tel:"",
					message:"",
					count:0
				},
				statusSend:false,
				activity:{
					_id:"",
					charge:{
						enrollFee:0
					}
				},
				summary:0
			}
		},
		methods:{
			chargeupdate:function(){
				this.summary = this.activity.charge.enrollFee*this.member.count;
			},
			sendEnroll:function(){
				if(this.statusSend==false){
					alert("请查看免责声明");
					return;
				}
				var info = {};
				info.member = {};
				info.member.name = this.member.name;
				info.member.tel = this.member.tel;
				info.member.count = this.member.count;
				info.member.message = this.member.message;
				info.activityId = this.activity._id;
				console.log(info);
				this.$http.post(this.url,info).then(function(res){
					alert("报名成功");
				},function(err){
					console.log(err)
				});

			}
		}
	}
</script>